<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

    <title>补充信息</title>
    <style>

        .small {
            background-color: rgba(255, 255, 255, 0.88);
            height: 56px;
            width: 100%;
            margin-bottom: 7px;
            position: relative;
            text-align: center;
        }

        body {
            background-color: rgba(230, 230, 230, 0.88);
            margin: 70px 0 0 0;
        }

        .name {
            float: left;
            width: 25%;
            font-size: 20px;
            line-height: 55px;
        }

        .value {
            width: 95%;
            text-align: left;
        }

        input[type=text] {
            width: 64%;
            border: 0;
            outline: 0;
            font-size: 19px;
            height: 28px;
            margin-top: 15px;

        }

        .gender {
            position: relative;
            line-height: 30px;
        }

        input[type="radio"] {
            width: 20px;
            height: 20px;
            opacity: 0;
        }

        label {
            position: absolute;
            left: 27%;
            top: 8px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #999;
        }

        /*设置选中的input的样式*/
        /* + 是兄弟选择器,获取选中后的label元素*/
        input:checked + label {
            background-color: #006eb2;
            border: 1px solid #006eb2;
        }

        input:checked + label::after {
            position: absolute;

            width: auto;
            height: 10px;
            top: 3px;
            left: 6px;
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg)
        }

        select {
            -webkit-appearance: none;
            height: 35px;
            font-size: 18px;
            line-height: 55px;
            border: 0;
            background: transparent;
        }

        #input {
            background-color: #2e6da4;
            position: absolute;
            width: 66%;
            height: 7%;
            margin: 30px 0 0 14%;
            border-radius: 20px;
            font-size: 20px;
            color: aliceblue;
        }
    </style>
</head>
<body>
<div id="big">

        <div class="small">
            <div class="name">姓名</div>
            <div class="value"><input id="from-name" class="input1" type="text" placeholder="输入姓名" name="name"></div>
        </div>
        <div class="small">
            <div class="name">手机号</div>
            <div class="value"><input id="from-phone" class="input1" type="text" placeholder="输入手机号" name="phone"></div>
        </div>
        <div class="small">
            <div class="name">性别</div>

            <div class="value gender">
                <div postion：relative>
                    <input id="gender1" name="gender" value="男" type="radio" style="position: absolute"><label for="gender1"
                                                                                                     style="top: 18px;">
                    <span style="position: absolute;margin-left: 25px;top: -5px;">男</span></label>
                </div>

                <div postion：relative>
                    <input id="gender2" name="gender" type="radio" value="女" style="margin-left: 25px;position: absolute"><label
                        for="gender2" style="top: 18px;margin-left: 69px;">
                    <span style="position: absolute;margin-left: 25px;top: -5px;">女</span></label>
                </div>
            </div>
        </div>

        <div class="small">
            <div class="name">生日</div>
            <div class="value"><input id="from-birthday" class="input1" type="text" placeholder="八位生日：19990909" name="birthday"></div>
        </div>

        <div class="small">
            <div class="name">密码</div>
            <div class="value"><input id="from-password" class="input1" type="text" placeholder="六位密码" name="password"></div>
        </div>

        <div class="small">
            <div class="name">销售区域</div>
            <div class="value">
                <select id="select-qy" name="quyu">
                    <option>请选择</option>
                    <option value="0"> 河北省</option>
                    <option value="1"> 山东省</option>
                    <option value="2"> 河南省</option>
                </select>
            </div>
        </div>

        <div class="small">
            <div class="name">开卡店仓</div>
            <div class="value">
                <select id="select-dc" name="store">
                    <option>请选择</option>
                    <option value="0"> 河北省</option>
                    <option value="1"> 山东省</option>
                    <option value="2"> 河南省</option>
                </select>
            </div>
        </div>
        <div class="small">
            <div class="name">开卡人</div>
            <div class="value">
                <select id="select-kk" name="emp">
                    <option >请选择</option >
                    <option value="0"> 河北省</option>
                    <option value="1"> 山东省</option>
                    <option value="2"> 河南省</option>
                </select>
            </div>
        </div>
        <div class="small">
            <div class="name">卡类型</div>
            <div class="value"><input id="vip_type" class="input1" type="text" value="默认" readonly="readonly"
                                      style="color: #a0a0b7" name="viptype"></div>
        </div>
</div>
<div id="div-button">
    <input id="input" type="button" value="提交">
</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
    (function ($) {
        $.getUrlParam1 = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null)
                return decodeURI(r[2]);
            return null;
        }
    })(jQuery);
</script>
<script>
    var token;
    $(document).ready(function () {
        token = $.getUrlParam1("token");
        $("#select-dc").html("<option>请选择</option>");
        $("#select-kk").html("<option>请选择</option>");
        //AreaData(token);
       // VIPType();
    });
    $("#input").click(function () {
        var name = $("#from-name").val();
       // var phone = $("#from-phone").val();
        var gender=$('input:radio[name="gender"]:checked').val();
        var birthday = $("#from-birthday").val();
        //var password = $("#from-password").val();
       // var qy = $("#select-qy").find("option:selected").text();
       // var dc = $("#select-dc").find("option:selected").text();
       // var kk = $("#select-kk").find("option:selected").text();
       // var viptype = $("#vip_type").val();
        //****************************************

        var namepattern = /^[\u4E00-\u9FA5]{1,6}$/;
        if (!namepattern.test(name)){
            alert("姓名格式错误");
            return
        }

        var phonepattern = /^1[34578]\d{9}$/;
        if (!phonepattern.test(phone)){
            alert("手机号输入错误");
            return
        }
        var D=$('input:radio[name="gender"]:checked').val();
        if(D==null||D==undefined||D==""){
            alert("选择性别");
            return
        }

        if (birthday.length!==8){
            alert("生日格式错误");
            return;
        }
        if (password.length!==6){
            alert("请输入6位密码");
            return;
        }
        if(qy==="请选择"){
            alert("请选择区域");
            return ;
        }

        if (dc==="请选择"){
            alert("请选择门店");
            return;
        }
        if (kk==="请选择"){
            alert("请选择开卡人");
            return;
        }

        //*********************************************
        $.ajax({
            "url": "/vip/register/",
            "data": "name="+name+"&phone="+phone+"&gender="+gender+"&birthday="+birthday+"&password="+password+"&territory="+qy+"&store="+dc+"&emp="+kk+"&type="+viptype+"&token="+token,
            "type": "POST",
            "dataType": "json",
            "success": function (json) {

                if (json.state == 200) {
                    alert("注册成功！");
                } else {
                    alert(json.message);
                }
            }
        })
    });

    function VIPType() {

        $.ajax({
            "url": "/tool/viptype/",
            "data": "token=" + token,
            "type": "POST",
            "dataType": "json",
            "success": function (json) {

                $("#vip_type").attr("value", json.data);
            }
        })
    }
    $("#select-qy").change(function () {
        //清空
        $("#select-dc").html("<option>请选择</option>");
        $("#select-kk").html("<option>请选择</option>");
        //this 代表第一个下拉选
        var id = this.value;

        StoreData(id)
    });

    $("#select-dc").change(function () {
        //清空

        $("#select-kk").html("<option>请选择</option>");
        //this 代表第一个下拉选
        var id = this.value;

        EMPData(id)
    });

    function EMPData(id) {
        if (id === null) {
            return
        }
        $.ajax({
            "url": "/tool/emp/",
            "data": "id=" + id + "&token=" + token,
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                var list = json.data;
                for (var i = 0; i < list.length; i++) {
                    var opt = $("<option  value='" + list[i].id + "'></option>");
                    opt.text(list[i].name);
                    $("#select-kk").append(opt);
                }
            }
        })
    }
    function StoreData(id) {
        if (id === null) {
            return
        }
        $.ajax({
            "url": "/tool/store/",
            "data": "id=" + id + "&token=" + token,
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                var list = json.data;
                for (var i = 0; i < list.length; i++) {
                    var opt = $("<option  value='" + list[i].id + "'></option>");
                    opt.text(list[i].name);
                    $("#select-dc").append(opt);
                }
            }
        })
    }

    function AreaData() {
        $.ajax({
            "url": "/tool/area/",
            "data": "token=" + token,
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                $("#select-qy").html("<option>请选择</option>");
                var list = json.data;
                for (var i = 0; i < list.length; i++) {
                    var opt = $("<option  value='" + list[i].id + "'></option>");
                    opt.text(list[i].name);
                    $("#select-qy").append(opt);
                }
            }
        })
    }
</script>
</html>